<route lang="json5" type="page">
{
  layout: 'main',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '评测',
  },
}
</route>

<template>
  <view class="questionnaire-container">
    <view v-for="(item, index) in questions" :key="index" class="question-block">
      <view class="question">{{ index + 1 }}. {{ item.question }}</view>
      <view
        v-for="(option, optionIndex) in item.options"
        :key="optionIndex"
        class="option-card"
        :class="{ selected: item.answer === item.optionIds[optionIndex] }"
        @click="item.answer = item.optionIds[optionIndex]"
      >
        {{ option }}
      </view>
    </view>
    <wd-button type="primary" @click="submit" block>提交</wd-button>
    <wd-toast />
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useToast } from 'wot-design-uni'
import cache from '@/utils/cache'
import { getSurveyDetail, submitSurvey } from '@/api/survey'
import { useUserStore } from '@/store/user'

interface Question {
  questionId: string
  question: string
  optionIds: string[]
  options: string[]
  answer: string
}

const userStore = useUserStore()
const questions = ref<Question[]>([])
const toast = useToast()

onShow(() => {
  getInfo()
})

const getInfo = () => {
  const survey = cache.get('survey')
  if (!survey) {
    toast.error('问卷信息获取失败')
    uni.navigateBack()
  }
  getSurveyDetail({ surveyId: survey.id })
    .then((res) => {
      questions.value = res.data as any[]
    })
    .catch((err) => {
      toast.error('获取问卷详情失败' + err)
    })
}

const submit = () => {
  // 处理提交逻辑
  console.log('问卷回答', questions.value)
  const surveyId = cache.get('survey').id
  const userId = userStore.userInfo.openid
  if (!surveyId || !userId) {
    toast.error('提交失败，缺少必要信息')
    return
  }

  const payload = {
    surveyId,
    userId,
    wxSurveyDetails: questions.value,
  }

  submitSurvey(payload)
    .then(() => {
      toast.success('提交成功')
      uni.navigateBack()
    })
    .catch((err) => {
      toast.error('提交失败' + err)
    })
}
</script>

<style lang="scss" scoped>
.questionnaire-container {
  padding: 20px;
  margin: 20px;
  border: 2px solid #dbe2ef;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);

  .question-block {
    margin-bottom: 30px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 6px 12px rgb(0 0 0 / 10%);
    }

    .question {
      padding: 15px 20px;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      background-color: #f7f9fc;
      border-bottom: 1px solid #e4e9f0;
    }

    .option-card {
      padding: 15px 20px;
      margin-bottom: 0;
      border-top: 1px solid #e4e9f0;
      border-radius: 0;
      box-shadow: none;
      transition: background-color 0.3s ease;

      &:last-child {
        border-radius: 0 0 8px 8px;
      }

      &.selected {
        font-weight: 500;
        color: #1a73e8;
        background-color: #e7effd;
      }

      &:active {
        background-color: #d2e3fd;
      }
    }
  }
}
</style>
